<template>
  <section id="default">
    <div style='padding-bottom:50px;'>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for='(val,index) in goodsInfoUse.iconArr' :key='index'>
                    <img :src="val"  width="100%">
                </div>
            </div>
            <div class="swiper-scrollbar" style='height:2px;'></div>
        </div>
        <h1 class='title'>{{goodsInfoUse.goodsname}}</h1>
        <div style='padding:18px'>
            <el-row>
                <el-col :span='18' style='font-size:20px;line-height:20px;color:red;'>￥{{handleMoney(goodsInfoUse.price)}}</el-col>
                <el-col :span='6' class='btn-compute'>
                    <div @click='addCar' class='fa fa-plus-circle animated animation'></div>
                    <div style='color:red;'>{{count?count:'0'}}</div>
                    <div @click='decCar' class='fa fa-minus-circle animated animation'></div>
                </el-col>
            </el-row>
        </div>
        <p style='height:10px;background:#eee;'></p>
        <h4 class='change-guige'>选择商品</h4>
        <el-row style='padding:0 0 20px 18px;'>
            <el-col :span='5' v-for="(val,index) in guige" :key='index'>
              <el-badge :value="val.imgBorder?count:''" class="item">
                <div style='width:60px;height:60px;margin:auto;' class='animated animation1' @click='toggleGuige(val.id,$event)'>
                    <img :src="val.img" width="100%" height="100%" :class="{'img-border-black':true,'img-border-red':val.imgBorder}">
                </div>
              </el-badge>
            </el-col>
        </el-row>
        <p style='height:10px;background:#eee;'></p>
        <h4 class='change-guige'>商品详情</h4>
        <div >
          <img width='100%' height='100%' v-for="(val,index) in goodsInfoUse.iconDetails" :src="val">
        </div>
    </div>
     <!-- 这两个层都是控制左边导航 -->
    <CloseLeft v-if='controlModel'  @closeModel='controlModel=false'/>
    <transition
        enter-active-class='animated bounceInLeft'
        leave-active-class='animated bounceOutLeft'
    >
        <Left v-if='controlModel'  @changeType='changeType'/>
    </transition>
    <!-- 这两个层都是控制左边导航 -->

    <!-- 这一个层是聊天二维码 -->
    <transition
        enter-active-class='animated fadeIn'
        leave-active-class='animated fadeOut'
    >
        <Qr v-if='controlQr' @closeQr='controlQr=false'/>
    </transition>
    <!-- 这一个层是聊天二维码 -->
    <Bottom @openLeft='controlModel=true' :price='price' @openQr='controlQr=true' @car='car'/>

  </section>
</template>
<script>
import Left from '@/components/left.vue';
import Bottom from '@/components/bottom.vue';
import CloseLeft from '@/components/close-left.vue';
import Qr from '@/components/qr.vue';
import {GOODS_INFO,_layer,_money,GOODS_COUNT,GOODS_SHULIANG} from '@/comm.js';
export default {
  data(){
    return ({
      price:0,                //总价
      count:0,                //商品数量
      goodsInfo:[],           //当前商品信息
      goodsInfoUse:{},        //所有商品规格对应的商品信息
      //商品规格图
      guige:[
      ],
      controlModel:false,     //控制左边导航
      controlQr:false,        //控制二维码
    });
  },
  beforeCreate(){
    $('body').attr('title','商品详情');
    let id=this.$route.query.id;
    $.post(GOODS_INFO,{
        arrId:id
    },(data)=>{
        console.log('狗哦')
        console.log(data);
        let guige=[];
        if(data.state){
          data.data.map((val)=>{
            val.iconArr=JSON.parse(val.iconArr);
            val.iconDetails=JSON.parse(val.iconDetails);
            val.iconMain=JSON.parse(val.iconMain);
            guige.push({img:val.iconMain[0],id:val.id,imgBorder:false});
            return val;
          });
          guige[0].imgBorder=true;
          this.goodsInfoUse=data.data[0];
          this.guige=guige;
          this.goodsInfo=data.data;
          this.getCount(data.data[0].id);
        }else{
          _layer(data.message);
        }
    });
  },
  components:{
    Left,
    Bottom,
    CloseLeft,
    Qr,
  },
  methods:{
    //左边导航的选择
    changeType(){},
    car(){
        // this.$router.push({path:'/changeAddress'});
        // this.$router.push({path:'/myCarList'});
        this.$router.push({path:'/orderSubmit'});
    },
    handleMoney(money){
      return _money(money);
    },
    //得到商品数量
    getCount(id){
        this.handleGoodsCount(id);
    },
    handleGoodsCount(id,status=''){
      $.post(GOODS_COUNT,{goodsId:id,status:status},(count)=>{
          console.log('商品数量');
          console.log(count)
          if(count.state){
            this.count=count.data.singleCount;
            this.price=count.data.totalMoney; 
          }else{
            _layer(count.msg);
          }
      });
    },
    //切换规格
    toggleGuige(id,ev){
      this.getCount(id);
      for(let i=0;i<this.goodsInfo.length;i++){
        if(this.goodsInfo[i].id==id){
          this.goodsInfoUse=this.goodsInfo[i];
          break;
        }
      }
      this.guige.map((val)=>{
        if(val.id==id){
          return val.imgBorder=true;
        }else{
          return val.imgBorder=false;
        }
      });
    },
    decCar(){
      if(this.count-- <=1){
        this.count=0;
        return;
      }
      this.handleGoodsCount(this.goodsInfoUse.id,'subtract');
     
    },
    addCar(){
        this.count++;
        this.handleGoodsCount(this.goodsInfoUse.id,'add');
    }
  },
  mounted(){
    setTimeout(function(){
        new Swiper ('.swiper-container', {
            autoplay : {
              delay:3000,
              disableOnInteraction: false,
            },
            scrollbar: {
               el: '.swiper-scrollbar',
            },
        }); 
        $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
        $('.animation').click(function(){
            let el=$(this)
            el.addClass('bounceIn');
            setTimeout(function(){
                el.removeClass('bounceIn');
            },300);
        });
        $('.animation1').click(function(){
            let el=$(this)
            el.addClass('jello');
            setTimeout(function(){
                el.removeClass('jello');
            },300);
        });
    },500);
  }
}
</script>
<style scoped>
    .item {
      margin-top: 10px;
    }
   .title{
        padding:10px 10px;
        font-size:16px;
        letter-spacing: 1px;
        line-height: 26px;
   }
   .btn-compute > div{
        width:33.3%;
        height:30px;
        float:left;
        font-size:22px;
        text-align: center;
        line-height: 20px;
        color:#0e74de;
   }
   .change-guige{
        padding:15px 18px;
        font-size:16px;
        color:#999;
   }
   .img-border-black{
        /*border:1px solid black;*/
   }
   .img-border-red{
    border: 1px solid #eb2359;
   }
</style>
